<template>
    <div style="display: flex; height: 50vh;">
        <div style="flex: 1.3;" v-if="isAll">
            <div id="containerDetail"></div>
        </div>
        <div style="flex: 1; margin-left: 10px;">
            <el-scrollbar style="width: 100%; height: 100%;">
                <el-row style="font-size: 16px;">
                    <el-col :span="24" class="col">
                        <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">ID</span>
                        <span class="content" :class="{ halfFontColor: !isAll }">{{ details.id }}</span>
                    </el-col>
                    <el-col :span="24" class="col">
                        <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">主设备名称</span>
                        <span class="content" :class="{ halfFontColor: !isAll }">{{ details.device_name }}</span>
                    </el-col>
                    <el-col :span="24" class="col">
                        <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">主设备编号</span>
                        <span class="content" :class="{ halfFontColor: !isAll }">{{ details.device_no }}</span>
                    </el-col>
                    <el-col :span="24" class="col">
                        <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">主设备类型</span>
                        <span class="content" :class="{ halfFontColor: !isAll }">{{ details.new_mold_name }}</span>
                    </el-col>
                    <el-col :span="24" class="col">
                        <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">主设备预警值</span>
                        <div style="display: flex; flex-direction: column;">

                            <span class="content" style="width: 100%; white-space: nowrap;"
                                :class="{ halfFontColor: !isAll }" v-for="(item, index) in details.warn_data"
                                :key="index">{{ item.title2 + '：' + item.value }}</span>
                        </div>
                    </el-col>
                    <el-col :span="24" class="col" v-if="isFireControlHost">
                        <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">子设备名称</span>
                        <span class="content" :class="{ halfFontColor: !isAll }">{{ data['sub_name'] }}</span>
                    </el-col>
                    <el-col :span="24" class="col" v-if="isFireControlHost">
                        <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">子设备编号</span>
                        <span class="content" :class="{ halfFontColor: !isAll }">{{ data['sub_device_no'] }}</span>
                    </el-col>
                    <el-col :span="24" class="col" v-if="isFireControlHost">
                        <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">子设备位置</span>
                        <span class="content" :class="{ halfFontColor: !isAll }">{{ data['sub_address'] }}</span>
                    </el-col>
                    <!-- <el-col :span="24" class="col">
                      <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">所属单位</span>
                      <span class="content" :class="{ halfFontColor: !isAll }">{{ details.yj_full_name || details.yj_unit_full_name }}</span>
                  </el-col> -->
                    <!-- <el-col :span="24" class="col">
                      <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">事件描述</span>
                      <span class="content" :class="{ halfFontColor: !isAll }">{{ details.event_type }}</span>
                  </el-col> -->
                    <el-col :span="24" class="col">
                        <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">安装时间</span>
                        <span class="content" :class="{ halfFontColor: !isAll }">{{ formatDate(details.create_time)
                        }}</span>
                    </el-col>
                    <!-- <el-col :span="24" class="col">
                        <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">量值</span>
                        <span class="content" :class="{ halfFontColor: !isAll }" v-html="details.measure"></span>
                    </el-col> -->
                    <el-col :span="24" class="col">
                        <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">安装照片</span>
                        <el-image style="width: 100px; height: 100px; margin: 10px;" :src="upDataUrl + details.images"
                            class="checkImg" :preview-src-list="[upDataUrl + details.images]"></el-image>
                        <!-- <span class="content" :class="{ halfFontColor: !isAll }" v-html="details.measure"></span> -->
                    </el-col>
                    <!-- <el-col :span="24" class="col">
                        <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">安装视频</span>
                        <span class="content" :class="{ halfFontColor: !isAll }" v-html="details.measure"></span>
                    </el-col> -->
                    <el-col style="margin-top: 10px;" v-if="!isAll">
                        <recentRescue :coordinate="{ longitude: details.longitude, latitude: details.latitude }">
                        </recentRescue>
                    </el-col>
                </el-row>
            </el-scrollbar>
        </div>
    </div>
</template>
<script>
export default {
    props: ['details', "isAll"],
    data() {
        return {
            map: '',
            upDataUrl: import.meta.env.DEV
        ? "/proxy/"
        : import.meta.env.VITE_APP_API_BASEURL,
        }
    },
    mounted() {
        console.log(this.details);
        if (this.isAll) {
            setTimeout(() => {
                this.getMap(this.details.longitude, this.details.latitude)
            }, 500)
        }
    },
    computed: {
        data: {
            get() {
                return this.details.device_data
            },
            set() { }
        },
        isFireControlHost: {
            get() {
                return this.data.service_type === 'fireControlHost';
            },
            set() { }
        }
    },
    beforeUnmount() {
        if (this.isAll) {
            this.map.clearMap()
            this.map.destroy()
        }
    },
    methods: {
        // 定位
        getMap(lng, lat) {
            // 地图
            var marker = null
            var map = new AMap.Map('containerDetail', {
                resizeEnable: true, // 允许缩放
                center: [lng, lat], // 设置地图的中心点
                zoom: 15, // 设置地图的缩放级别，0 - 20
            }),
                doMark = (lng, lat) => {// 设置标记
                    map && marker && map.remove(marker);
                    marker = new AMap.Marker({
                        map: map,
                        position: new AMap.LngLat(lng, lat),   // 经纬度
                    });
                };
            this.map = map
            map.on('click', (res) => {
                console.log(res)
                // doMark(lng, lat);
            })
            doMark(lng, lat);
        },
        // 时间转换
        formatDate(timeStamp) {
            if (!timeStamp) return '/'
            // timeStamp = +timeStamp
            timeStamp = timeStamp * 1000
            var date = new Date(timeStamp)
            // 年月日
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            month = month < 10 ? '0' + month : month
            var day = date.getDate()
            day = day < 10 ? '0' + day : day
            // 时分秒
            var hour = date.getHours()
            hour = hour < 10 ? '0' + hour : hour
            var min = date.getMinutes()
            min = min < 10 ? '0' + min : min
            var sec = date.getSeconds()
            sec = sec < 10 ? '0' + sec : sec
            return year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec
        },
    },
}
</script>
<style scoped lang="scss">
.halfFontColor {
    color: #fff !important;
}
.halfBgColor {
    background-color: #2c5367 !important;
}
.title2 {
    background-color: #f7f7f7;
    text-align: center;

    /* width: 150px; */
    width: 30%;
    display: inline-block;
    border-bottom: 1px solid #e8edf8;
    padding: 15px 0;
}
.content {
    padding: 15px 0 15px 15px;
    width: 70%;
}
.col {
    border-bottom: 1px solid #e8edf8;

    /* height: 40px;
  line-height: 40px; */
    display: flex;
}
#containerDetail {
    z-index: 100;
    width: 100%;
    height: 100%;
}
</style>
